<style>
	body{background: #f6f6f6;}
	/* .tableinfo{display:none !important;} */
	/* table.dataTable tbody th, table.dataTable tbody td{padding:0;border:none;} */
	#subUser{border:none;} 
	.note-edit-td{background: #fff;}
	* {
	font-size: 14px;
}

.circle-qiu01 {
	background: #D8D21C!important;
}

.circle-qiu02 {
	background: #3273F9!important;
}

.circle-qiu03 {
	background: #515567!important;
}

.circle-qiu04 {
	background: #E6962D!important;
}

.circle-qiu05 {
	background: #0EC2C4!important;
}

.circle-qiu06 {
	background: #2D35D0!important;
}

.circle-qiu07 {
	background: #AEAFC5!important;
}

.circle-qiu08 {
	background: #E63131!important;
}

.circle-qiu09 {
	background: #7C1F1F!important;
}

.circle-qiu10 {
	background: #2DCC21!important;
}

.yuan {
	display: inline-block;
	margin: 0 4px;
	border-radius: 50%;
	color: white;
	font-size: 14px;
	width: 22px;
	height: 22px;
	text-align: center;
	line-height: 22px;
}

li {
	height: 60px;
	line-height: 60px;
	border-top: 1px solid #f2f2f2;
}

tr {
	background: white;
	height: 30px;
}

#div-i-btnGroup {
	background-color: #F1F1F1;
	height: 33px;
}

#div-i-btnTypeGroup button {
	margin-top: 0;
	width: 25%;
	font-size: 16px;
	border-radius: 1px;
	border: 4px solid transparent;
	transition: all 0.3s;
}

.btnTypeActive {
	border: 4px solid #0d7bbb!important;
}

#div-i-btnTypeGroup {
	background-color: white;
	font-size: 0;
}

#div-i-btnGroup select {
	margin-top: 0;
	color: #059BF3;
	outline: none;
	font-size: 18px;
	font-weight: bold;
	border: none;
	width: 100%;
}

.tr {
	cursor: pointer;
}

#table-i-myOrdersList {
	border-bottom: none;
}

#tbody-i-dataWrapper td {
	padding-left: 0;
	padding-right: 0;
}

.hiddenLotterNumberLine span {
	word-break: break-all;
	white-space: normal;
}

.ordertableInfo {
	display: flex;
	flex-direction: column;
	margin-bottom: 60px;
}

.dataTables_wrapper .dataTables_paginate {
	text-align: center;
}

.tableSearch {
	justify-content: center;
	padding-top: 10px;
	width:100%;
}

.class-input-pageNumberTwo {
	margin-right: 6px;
}

.hidden-td {
	display: none;
}

.shaizi {
	width: 28px !important;
	height: 28px !important;
}

.klsf {
	width: 28px !important;
	height: 28px !important;
	margin-right: 5px;
}

.circle-qiu {
	display: inline-block;
	background: red;
	margin: 0 4px;
	border-radius: 50%;
	color: white;
	font-size: 14px;
	width: 22px;
	height: 22px;
	text-align: center;
	line-height: 22px;
}

#betRecord{
	border:none;
}

#betRecord td{
    padding-left: 0;
    padding-right: 0;
}

#betRecord tbody tr td {
    border: transparent;
    border-bottom: 10px solid #F1F1F1;
    padding-left: .75em;
    padding-right: .75em;
}

.main {
    padding-top: 3.5em;
}


.searchBtn {
    height: 40px;
}

#leftTabBox .hd {
    background: #f6f6f6;
    line-height: 2.6em;
    font-size: .65em;
    position: fixed;
    top: 88px;
    height:63px;
    z-index: 100;
}

.filter[data-v-0a725a61] {
	top: 3.3em;
	z-index: 150;
}

.filter .bt[data-v-0a725a61], .filter .tp[data-v-0a725a61]{
	 max-height: 19em;
}

.bd[data-v-0a725a61] {
    margin-top: 63px;
}

.dataTables_empty{
	background: #fff;
}

.dataTables_info{
	display: none;
}

.tableinfo label{
	display: none;
}

.main {
    padding-top: 3.5em;
    padding-bottom: 1em;
}


</style>
<div class="wapper" id="lowerBetDetail">
	<div class="col-xs-12 col-sm-4 col-sm-offset-4 text-center tops" style="color:white;background: #059BF3;height: 50px;line-height:50px;position: fixed;margin-top: 0px;left: 0px;z-index: 100;padding-left:0;padding-right:0;">
		<a  class="glyphicon glyphicon-chevron-left fl" onclick="backPage()" style="cursor:pointer; color: white;position:absolute;top:50%;transform:translateY(-50%);font-size: 20px;left:10px;"></a>
		<span style="font-size: 16px;">下级投注明细</span>
	</div>
	
	<div data-v-0a725a61="" class="col-xs-12 col-sm-4 col-sm-offset-4 main">
	<div data-v-0a725a61="" class="dataType"><em data-v-0a725a61="">筛选</em><i data-v-0a725a61="" class="defFont"></i></div>
	<div data-v-0a725a61="" class="searchBtn">
		<div data-v-0a725a61="" class="search"><input data-v-0a725a61="" type="text" placeholder="请输入下级账号"><span data-v-0a725a61="">搜索</span></div>
	</div>
	<div data-v-0a725a61="" id="leftTabBox">
		<div data-v-0a725a61="" class="hd">
			<ul data-v-0a725a61="">
				<li data-v-0a725a61="" class="on">全部</li>
				<li data-v-0a725a61="">已中奖</li>
				<li data-v-0a725a61="">未中奖</li>
				<li data-v-0a725a61="">等待开奖</li>
			</ul>
		</div>
		<div data-v-0a725a61="" class="bd dontSelect">
			<div data-v-0a725a61="" class="scrollBox">
				<div data-v-0a725a61="" class="touchScroll">
					<table class="class-tableDataTable class-table-needClick display table table-striped table-bordered table-hover" id="betRecord">
						<thead style="display:none;">
							<tr>
							</tr>
						</thead>
						<tbody></tbody>
					</table>
					<!-- <div data-v-0a725a61="" class="fullPageMsg">
						<p data-v-0a725a61="">暂无记录</p>
					</div> -->
				</div>
			</div>
			<div data-v-0a725a61="" class="scrollBox">
				<!---->
			</div>
			<div data-v-0a725a61="" class="scrollBox">
				<!---->
			</div>
			<div data-v-0a725a61="" class="scrollBox">
				<!---->
			</div>
		</div>
	</div>
	<div data-v-0a725a61="" class="selected" style="display: none;">
		<div data-v-0a725a61="" class="blackBg"></div>
		<div data-v-0a725a61="" class="filter">
			<div data-v-0a725a61="" class="tp"><span data-v-0a725a61="" class="on">今天</span><span data-v-0a725a61="" class="">昨天</span><span data-v-0a725a61="" class="">七天</span></div>
			<div data-v-0a725a61="" class="bt"><span data-v-0a725a61="" class="on" data-cname="">全部彩种</span>
				<!---->
			</div>
			<!---->
			<div data-v-0a725a61="">
				<div data-v-0a725a61="" class="BTN fil-btn">筛 选</div>
			</div>
		</div>
	</div>
	
	
</div>

	
</div>
<script>
$(".foot").hide();
var startTime = GetDateStr(0);
var endTime=GetDateStr(0);
var cName="";
var subName="";
var state="";

var cp={
		"北京PK拾":"bjpk10",
		"二分PK拾":"2fpk10",
		"幸运飞艇":"xyft",
		"幸运赛马":"xysm",
		"二分飞艇":"2fft",
		"重庆时时彩":"cqssc",
		"二分时时彩":"2fssc",
		"天津时时彩":"tjssc", 
		"新疆时时彩":"xjssc",
		"广东快乐十分":"gdkl10f", 
		"重庆快乐十分":"cqkl10f", 
		"安徽11选5":"ah11x5", 
		"广东11选5":"gd11x5",
		"江西11选5":"jx11x5", 
		"山东11选5":"sd11x5",
		"上海11选5":"sh11x5", 
		"香港六合彩 ":"xg6hc", 
		"五分六合彩":"5f6hc",
		"上海时时乐":"shssl", 
		"排列三":"pl3", 
		"福彩3D":"fc3d", 
		"安徽快3":"ahk3", 
		"广西快3":"gxk3",
		"江苏快3":"jsk3", 
		"北京快3":"bjk3", 
		"吉林快3":"jlk3", 
		"三分快3":"3fk3",
		"二分快3":"2fk3",
};
for(var s1 in cp){
	$(".bt").append('<span data-v-0a725a61="" class="" data-cname='+cp[s1]+'>'+s1+'</span>')
}

var colorObj = {
		"1": {"type": "0", "color": "blue", "text": "待开奖",},
		"2": {"type": "1", "color": "red", "text": "未中奖", },
		"3": {"type": "2", "color": "green", "text": "中奖", },
		"6": {"type": "2", "color": "green", "text": "和局", },
		"7": {"type": "3", "color": "gray", "text": "已撤单", },
		"8": {"type": "3", "color": "gray", "text": "官方异常", }, 
	};
function dataTable01(){
	var oTable=	$("#betRecord").DataTable({
			 "bProcessing" : false, 
			"bServerSide" : true,
			 "bPaginate" : true, 
			"sAjaxSource" : "/agencyCenter/xjcathecticRecord.do",
			"fnServerData" : retrieveData, 
			"destroy":true,
		       "bLengthChange": true,      
		      "bSort": false,
		      "bAutoWidth": false,
		      'aLengthMenu':[10], 
		       "searching": false,  
		       "pagingType": "full",
		       "dom": "t<'tableinfo'i<'tableSearch'p>l>",  
		       "language": {
		            "lengthMenu": "每页显示 _MENU_ 条记录",     
		             "zeroRecords": "没有检索到数据",     
		            "sInfo": "当前显示 _START_ 到 _END_ 条，共 _TOTAL_ 条记录",     
		            "info": "没有数据",     
		            "oPaginate": {     
		                "sFirst": "首页",     
		                "sPrevious": "前一页",     
		                "sNext": "后一页",     
		                "sLast": "尾页"    
		          	},
		            "search":"",
		            "searchPlaceholder": "请输入关键字",
		            "infoFiltered":   "(从  _MAX_ 记录中搜索出结果)",
		            "infoEmpty":      "没有找到匹配的信息",
		         },  
		         "columnDefs": [{"defaultContent": "",
                      "targets": "_all"}],
		         "columns": [
		        	 {"data": "cname", "className": "hidden-td id-edit-td"},
                     {"data": "state", "className": "hidden-td number-edit-td"},
                     {"data": "content", "className": "note-edit-td"},
		        	/*  { "data": "","className":" content-td"},
		        	 { "data": "huiyuanzh", "className": "user_name-td" },
					 { "data": "cname1", "className": "consume-td" },	
                     { "data": "period", "className": "rebate_type-td" },
                     { "data": "rebate_ratio", "className": "rebate_ratio-td"   },
                     { "data": "rebate_money", "className": "rebate_money-td"  },
                     { "data": "created_time","className": "created_time-td" }, */
                 ],	
                 "drawCallback": function() {
	  		        	var allKaiJiangs = $(".kaijiang");
	  		        	for (var i = 0; i < allKaiJiangs.length; i++) {
	  		        		var item2 = allKaiJiangs[i];
	  		        		if ($(item2).find(".circle-qiu").length !== 0) {
	  		        			continue;
	  		        		}
	  		        		var lotterNumArr = item2.innerText.trim().split(",");
	  		        		console.log(item2,lotterNumArr);
	  		        		var bgColor="";
	  		        		var html = "";
	 	        			var xg6hcBackGround = "";
	 	        			var xg6hcColor="";
	 	        			for (var j = 0; j < lotterNumArr.length; j++) {
	  		        			var item = lotterNumArr[j];
	  		        			if (!item) {
	  		        				continue;
	  		        			}
	  		        			if($(item2).closest("tr").find(".id-edit-td").text() === "2fpk10" || $(item2).closest("tr").find(".id-edit-td").text() === "bjpk10"|| $(item2).closest("tr").find(".id-edit-td").text() === "xyft"|| $(item2).closest("tr").find(".id-edit-td").text() === "xysm" || $(item2).closest("tr").find(".id-edit-td").text() === "2fft"){
	  		        				xg6hcBackGround="qiu"+item;
	  		        				var temp = "<span class='yuan circle-qiu"+ item +"'>" + item + "</span>";
		  		        			html += temp;
	  		        			}else if($(item2).closest("tr").find(".id-edit-td").text() === "3fk3" ||$(item2).closest("tr").find(".id-edit-td").text() === "jsk3" ||$(item2).closest("tr").find(".id-edit-td").text() === "ahk3" ||$(item2).closest("tr").find(".id-edit-td").text() === "gxk3" ||$(item2).closest("tr").find(".id-edit-td").text() === "bjk3" ||$(item2).closest("tr").find(".id-edit-td").text() === "2fk3"){
	  		        				var temp="<span class='shaizi sz"+item+"'></span>";
	  		        				html += temp;
	  		        			}else if($(item2).closest("tr").find(".id-edit-td").text() === "gdkl10f" || $(item2).closest("tr").find(".id-edit-td").text() === "cqkl10f"){
	  		        				var temp="<span class='klsf sg"+item+"'></span>";
	  		        				html += temp;
	  		        			}
	  		        			else if ($(item2).closest("tr").find(".id-edit-td").text() === "xg6hc" || $(item2).closest("tr").find(".id-edit-td").text() === "5f6hc") {
	 								if (blueArr.indexOf(item) != -1) {
	 									xg6hcBackGround = "style='background-color:#336DCC;'";
	 								}
	 								else if (greenArr.indexOf(item) != -1) {
	 									xg6hcBackGround = "style='background-color:#09B832;'";
	 								}
	 								var temp = "<span class='circle-qiu' " +xg6hcBackGround + ">" + item + "</span>";
		  		        			html += temp;
	 								
	 							}
	  		        			else{
	 								var temp = "<span class='circle-qiu' " + xg6hcBackGround + ">" + item + "</span>";
		  		        			html += temp;
	 							}
	  		        			xg6hcBackGround = "style='background-color:red;'";
	  		        		}
	  		        		$(item2).html(html);
	  		        		
	  		        		if ($(item2).closest("tr").find(".id-edit-td").text() === "xg6hc" || $(item2).closest("tr").find(".id-edit-td").text() === "5f6hc") {
	  		        			var $allYuanNodes = $(item2).find(".circle-qiu");
	  		        			var xg6hcColor =$allYuanNodes.eq($allYuanNodes.length - 1);
	  	 		        		$allYuanNodes.eq($allYuanNodes.length - 1).before("<span style='display:inline-flex;margin:1px;color:black;font-size:20px;width:22px;height:22px;justify-content:center;align-items:center;max-width:22px;max-height:22px;'>+</span>");
	  		        		}
	  		        	}
	 		        }
		});
	function retrieveData(sSource, aoData, fnCallback) {
		$.ajax({
			url : sSource,
			data : {
				"pageCount":aoData[0].value,
				"startIndex":aoData[3].value,
				"lineCount":aoData[4].value,
				"state":state,
				"xname":$(".search input").val(),
				"cname":cName,
				"date1":startTime,
				"date2":endTime,
			},
			type : 'post',
			dataType : 'json',
			async : false,
			success : function(result) { 
				if(result == 50) { 
					save.push("sy");
					bindSetData("login"); 
					return;
	   			}else if(result==60){
	   				pagePreserve();
	   				return;
	   			}
				
				if(result.aaData=="" && $(".search input").val()!=""){
					$(".search input").val("");
					layer.alert("请输入正确的下级用户");
				}
				
				var newArr = [];
       		 for (var i = 0; i < result.aaData.length; i++) {
       			var newObj = {};
       			var item = result.aaData[i];
       			newObj.cname = item.cname;
       			newObj.state = item.state === 8 ? String(item.state) + "7" : item.state;
				newObj.state = item.state === 6 ? String(item.state) + "3" : item.state;	 	
       			newObj.content = createNewLotterItem(item);
       			newArr.push(newObj);
       		 }
				result.aaData = newArr;
				fnCallback(result);/*  把返回的数据传给这个方法就可以了,datatable会自动绑定数据的*/
			},
			error : function(msg) {
			}
		});
	};
}
dataTable01();

function lotterItemPart2(item) {
	var btnHTML = "";
	/* if (item.state === 1 && item.cname != "xg6hc") {
		btnHTML = '<a class="btn btn-default btn-sm killOrder" data="' + item.id + '" >撤单</a>';
	} */
	return '<div style="padding-top:6px;display:flex;justify-content:space-between;align-items:center;">'+
	'<span style="color:silver;">点击查看详情</span>'+
	'<span style="flex:1;text-align:center;">' + item.orderdate + '</span>'+
	'<span>' + btnHTML + '</div></div>';
}

 function lotterItemPart3(item) {
	var wanfaHTML = "";
	for (var i = 1; i < 41; i++) {
		var strValue = item["str" + String(i)];
		if (strValue) {
			wanfaHTML += '<span style=""><span style="color:black;font-weight:bold;">' + item["cplay" + String(i)] + '：</span><span style="font-weight:bold;color:red;">' + strValue + '</span></span>';
		}
	}
	return '<div class="parentTr hidden xxxx hiddenLotterNumberLine" style="font-size: 14px;display:flex;flex-direction:column;">' + wanfaHTML + '</div>';
}



function createNewLotterItem(dataObj) {
	var acountYuan = dataObj.acount == "" ? "" : "元";
	var zhongjianStatus = checkItemZhongJiangStatus(dataObj);
	var kaijianghaoma = dataObj.lotternum == null ? "" : dataObj.lotternum;
	var startDiv = '<div style="display:flex;flex-direction:column;">';
	
	var part1 = '<div style="flex-grow:1;">'+
	'<div class="lotters '+ dataObj.cname + '" style="display:flex;">'+
		'<span style="flex:1;font-weight: bold;font-size: 16px;">' + dataObj.huiyuanzh + '</span>'+
		'<span style="flex:1;text-align: center;">' + dataObj.cname1 + '</span>'+
		'<span style="flex:1;text-align: right;"><span class="killOrderNeedMoney" style="font-weight:bold;color:red;">' + dataObj.acount + '</span>'+
			acountYuan +
		'</span>'+
	'</div>'+
	'<div class="' + dataObj.cname + '" style="color: silver ;display:flex;padding-top:6px;">'+
		'<span style="flex:1;">'+
			zhongjianStatus +
		'</span>'+
		'<span style="flex:1;"><span class="period-current">' + dataObj.period + '</span>期</span>'+
		'<span style="flex:1;text-align: center;color:black;text-align:right;">'+
			'共 <span style="font-weight:bold;color:red;">' + dataObj.lottercount + '</span> 注'+
		'</span>'+
	'</div>'+
	'<div class="parentTr tr" style="color: silver ;padding-top:6px;">'+
		'<span class="kaijiang">' + kaijianghaoma + '</span>'+
	'</div>'+
'</div>';
	 var part2 = lotterItemPart2(dataObj);
	var part3 = lotterItemPart3(dataObj); 
	return part1  + part2 + part3 ;
}		

function checkItemZhongJiangStatus(item) {
	var yuanValue = "";
	var stateValue = item.state;
	console.log(stateValue);
	var t = colorObj[String(stateValue)];
	var textValue = t.text;
	if (t.type === "2") {
		/* 是不是 0元 ？ */
		 if (stateValue === 6) {
			var allMoney = 0;
			for (var i = 1; i < 8; i++) {
				allMoney += item["money" + i];
			}
			if (item.goalmoney === 0) {
				yuanValue = "退还本金" + String(allMoney) + "元";
			} else {
				textValue = "中奖";
				yuanValue = String(item.goalmoney) + "元,<br>" + "和局退还本金" + String(allMoney) + "元";
			}
		} else {
			yuanValue = String(item.goalmoney) + "元";
		 } 
	}
	var html = '<span class="span-c-resultStatus"  data-type="' + t.type + '" style="color: ' + t.color + ';font-weight: bold;">' + textValue + yuanValue + '</span>';
	return html;
}

var IS_USER_MOVE = false;
$("#betRecord").on("touchstart", "tr", function(e) {
	IS_USER_MOVE = false;
});
$("#betRecord").on("touchmove", "tr", function(e) {
	IS_USER_MOVE = true;
});	

$("#betRecord").on(getEndClickEvent(), "tr", function(e) {
	if (IS_USER_MOVE) {
		return;
	}
	$(e.currentTarget).find(".hiddenLotterNumberLine").toggleClass("hidden");
});




/* 根据状态查询下级投注记录 */
$(".hd li").on("click",function(){
	$(this).addClass("on");
	$(this).siblings().removeClass("on");
	var index=$(this).index();
	if(index==0){/* 全部 */
		state="";
	}else if(index==1){ /* 已中奖 */
		state=3;
	}else if(index==2){ /* 未中奖 */
		state=2;
	}else if(index==3){ /* 待开奖 */
		state=1;
	}
	dataTable01()
});

/* 根据用户查询 */
$(".search span").on("click",function(){
	if($(".search input").val()==""){
		return;
	}
	dataTable01()
});


/* 筛选查询下级投注记录 */
$(".dataType").on("click",function(){
	$(".selected").toggle();
	if($(".selected").css("display")=="block"){
		$(".blackBg").on("click",function(e){
			$(".selected").hide();
		});
	}
});

/* 选择日期 */
$(".filter").on("click",".tp span",function(){
	$(this).addClass("on");
	$(this).siblings().removeClass("on");
});

/* 选择彩种名 */
$(".filter").on("click",".bt span",function(){
	$(this).addClass("on");
	$(this).siblings().removeClass("on");
});

/* 进行筛选 */
 $(".filter").on("click",".fil-btn",function(){
	 $(".selected").hide();
	 var time=$(".tp .on").text();
	 if(time=="今天"){
		 startTime = GetDateStr(0);
	 }else  if(time=="昨天"){
		 startTime = GetDateStr(1);
	 }else  if(time=="七天"){
		 startTime = GetDateStr(7);
	 }
	 cName=$(".bt .on").attr("data-cname");
	 dataTable01();
 });
 

</script>